<template>
  <div>
    <!-- // 我的好友模块 -->
    <el-button v-if="dialog === false && !isLoginFlag && !isMyFriendFlag" class="myFriends" type="primary" round @click="dialogOpenFn">我的好友</el-button>
    <el-drawer v-model="dialog" :with-header="false" size="250px">
      <el-scrollbar v-loading="myFriends_loadFlag" :show-close="false" height="90%">
        <div class="dialog_main">
          <h1>我的好友模块</h1>
          <a href="/chat">聊天室</a>
        </div>
      </el-scrollbar>
    </el-drawer>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref, computed } from 'vue'

const { isLogin } = defineProps(['isLogin'])
const isLoginFlag = computed(() => isLogin)

let isMyFriendFlag = ref<Boolean>(false)
let dialog = ref<Boolean>(false)
let myFriends_loadFlag = ref<Boolean>(false)

function dialogOpenFn() {
  dialog.value = true
  myFriends_loadFlag.value = true
  setTimeout(() => {
    //模拟加载
    myFriends_loadFlag.value = false
  }, 1000)
}

onMounted(() => {
  const loginReg = RegExp(/\/login/)
  if (window.location.pathname.match(loginReg)) {
    isLoginFlag.value = true
  } else {
    isLoginFlag.value = false
  }

  // 我的好友按钮 在我chat页面不用展示
  const chatReg = RegExp(/\/chat/)
  if (window.location.pathname.match(chatReg)) {
    isMyFriendFlag.value = true
  } else {
    isMyFriendFlag.value = false
  }
})
</script>

<style lang="scss" scoped>
// 我的好友
.myFriends {
  position: fixed;
  right: 0;
  top: 45%;
  transform: translateY(-50%);
  height: 120px !important;
  width: 14px !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  z-index: 998 !important;
}
::v-deep .myFriends span {
  white-space: normal !important;
}
.dialog_main {
  height: 2400px;
}
</style>
